<script lang="ts" setup>
import HelloWorld from './components/HelloWorld.vue'
import { NConfigProvider, NLayout, NLayoutSider, NLayoutContent, NMenu, NCard, NH1, NAvatar, NSpace, NStatistic, NNumberAnimation, lightTheme } from 'naive-ui'
import { ref } from 'vue'

const activeKey = ref('home')

// 定义菜单选项
const menuOptions = [
  {
    label: 'Ledger Nano S',
    key: 'ledger-nano-s',
    children: [
      {
        label: 'Account 1',
        key: 'ledger-account-1'
      },
      {
        label: 'Account 2',
        key: 'ledger-account-2'
      },
      {
        label: 'Account 3',
        key: 'ledger-account-3'
      }
    ]
  },
  {
    label: 'Trezor Model T',
    key: 'trezor-model-t',
    children: [
      {
        label: 'Account 1',
        key: 'trezor-account-1'
      },
      {
        label: 'Account 2',
        key: 'trezor-account-2'
      }
    ]
  },
  {
    label: 'Keystone',
    key: 'keystone',
    children: [
      {
        label: 'Account 1',
        key: 'keystone-account-1'
      }
    ]
  },
  {
    label: '设置',
    key: 'settings'
  }
]

const renderTitle = (title: string) => {
  const titles: Record<string, string> = {
    home: '首页',
    'ledger-nano-s': 'Ledger Nano S',
    'trezor-model-t': 'Trezor Model T',
    'keystone': 'Keystone',
    'ledger-account-1': 'Ledger Account 1',
    'ledger-account-2': 'Ledger Account 2',
    'ledger-account-3': 'Ledger Account 3',
    'trezor-account-1': 'Trezor Account 1',
    'trezor-account-2': 'Trezor Account 2',
    'keystone-account-1': 'Keystone Account 1',
    settings: '系统设置'
  }
  return titles[activeKey.value] || title
}

const onHomeClick = () => {
  activeKey.value = 'home'
}

</script>

<template>
  <n-config-provider :theme="lightTheme">
    <n-layout has-sider style="height: 100vh">
      <!-- 侧边栏导航 -->
      <n-layout-sider bordered collapse-mode="width" :collapsed-width="64" :width="240" >
        <!-- 首页卡片 -->
        <div style="padding: 20px 10px 0 10px;">
          <n-card size="small" @click="onHomeClick" :bordered="true" style="border-radius: 8px;">
            <n-space align="center">
              <n-avatar src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" round size="small" />
              <div style="flex: 1;">
                <div style="font-weight: bold; font-size: 14px;">用户名称</div>
                <n-statistic label="余额" :value="1234.56" precision="2" prefix="¥" />
              </div>
            </n-space>
          </n-card>
        </div>

        <n-menu v-model:value="activeKey" :options="menuOptions" default-value="home" />


      </n-layout-sider>

      <!-- 内容区域 -->
      <n-layout>
        <!-- 标题组件 -->
        <n-layout-content content-style="padding: 20px;">
          <n-card :content-style="{ padding: '10px 20px' }">
            <n-h1 style="font-size: 24px; margin: 0;">{{ renderTitle('') }}</n-h1>
          </n-card>

          <!-- 内容展示区 -->
          <n-card style="margin-top: 20px; height: calc(100% - 70px);">
            <HelloWorld v-if="activeKey === 'home'" />
            <div v-else>
              <p>当前选择的菜单项: {{ activeKey }}</p>
              <p>这里将显示 {{ renderTitle('') }} 的内容</p>
            </div>
          </n-card>
        </n-layout-content>
      </n-layout>
    </n-layout>
  </n-config-provider>
</template>

<style scoped>
:deep(.n-layout-header) {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #eee;
}
</style>